import React, { useEffect, useState } from "react"
import { IRouteComponentProps, history } from 'umi'
import styles from "./login.less"
import { Form, Input, Button, message } from 'antd';
import { loginAdmin, loginUser } from "@/services/modules/login";
import { IParams } from "@/utils/login";


const Login: React.FC<IRouteComponentProps> = (props) => {

    const error = () => {
        message.error('用户名或密码错误');
    };
    let [paramsData, setParamsData] = useState({} as IParams)

    async function onFinish(values: any) {

        //获取登录态
        loginUser(values.name, values.password).then(ok => {
            if (ok.statusCode === 200) {
                sessionStorage.setItem('token', ok.data.token)
                sessionStorage.setItem('user', JSON.stringify(ok.data))
                setParamsData(ok.data)
                // 登录
                loginAdmin(paramsData).then(ok => {
                    if (ok.statusCode === 200) {
                        //跳转首页 
                        history.replace('/workbench')
                    }
                })
            } else {
                error()
            }
        })
    };

    return (
        <div className={styles.LoginBox}>
            <div className={styles.box}>
                <div>
                    图片
                </div>
                <div className={styles.from}>
                    <h3>系统登录</h3>
                    <div className={styles.formBox}>
                        <Form name="basic" onFinish={onFinish}>
                            <Form.Item
                                label="账户"
                                name="name"
                                rules={[{ required: true, message: '请输入用户名!' }]}
                            >
                                <Input placeholder="请输入用户名" />
                            </Form.Item>

                            <Form.Item
                                label="密码"
                                name="password"
                                rules={[{ required: true, message: '请输入密码!' }]}
                            >
                                <Input.Password placeholder="请输入密码" />
                            </Form.Item>

                            <Form.Item >
                                <Button type="primary" htmlType="submit">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                    <div onClick={() => { history.replace('/registry') }}>
                        Or 注册用户
                    </div>
                </div>
            </div>
        </div>
    );
}
export default Login